<script setup lang="ts">
import { reactive ,ref } from 'vue'
import type { FormInstance } from 'element-plus';

const initForm = {
    username: undefined,
    sex: undefined,
    age: undefined,
    email:undefined
}

type SearchParams = {
    username?: string,
    sex?: number,
    age?: 0 | 1,
    email?:string
}
// 调用父组件传过来的函数
interface Emits {
    search:[val: SearchParams]
}
const emits = defineEmits<Emits>()

const formInline = ref( {...initForm} )

// 查询按钮
const onSubmit = () => {
    // console.log('submit!',formInline.value)
    const params = {}
    Object.keys(formInline.value).forEach(key => {
        if(formInline.value[key] !== undefined && formInline.value[key] !== '') {
            params[key] = formInline.value[key]
        }
    })
    emits('search',params)
}
// 重置按钮
const onResert = () => {
    console.log('重置')
    formInline.value = { ...initForm }
    emits('search',{})
}
</script>

<template>
    <el-form :inline="true" :model="formInline" class="form">
        <el-form-item label="用户名">
            <el-input v-model="formInline.username" placeholder="用户名" clearable />
        </el-form-item>
        <el-form-item label="性别">
            <el-select
                v-model="formInline.sex"
                placeholder="请选择性别"
                clearable
            >
                <el-option label="男" :value="1" />
                <el-option label="女" :value="0" />
            </el-select>
        </el-form-item>
        <el-form-item label="年龄">
            <el-input v-model="formInline.age" placeholder="年龄" clearable />
        </el-form-item>
        <el-form-item label="邮箱">
            <el-input v-model="formInline.email" placeholder="邮箱" clearable />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="primary" @click="onResert">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<style lang="scss" scoped>
.form{
    margin-top: 20px;
}
.form .el-input {
  --el-input-width: 220px;
}

.form .el-select {
  --el-select-width: 220px;
}
</style>